<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Retro Cinema Registration</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/swanky-purse/jquery-ui.css">
    <script src="../../lib/jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script src="../../dist/jquery.validate.js"></script>
    <script>
        $(function () {
            $.validator.addMethod("adultsOnly", function (value, element) {
                if ($("#movie .adult:checked").val() === "on") {
                    var now = new Date();
                    var dob = $("#dob").datepicker("getDate");
                    var age = now - dob;
                    return Math.floor(age / 31536000000) >= 18;
                }
                return true;
            });
            $("#movie").buttonset();
            $("#customer, #email, #dob, #reserve").button();
            $("#dob").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0",
                maxDate: "+0D"
            });
            $("#reservation").validate({
                errorClass: "ui-state-error",
                rules: {
                    customer: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    dob: {
                        required: true,
                        date: true
                    },
                    movie: {
                        required: true,
                        adultsOnly: true
                    }
                },
                messages: {
                    customer: "Please enter your name",
                    email: {
                        required: "Please enter your email",
                        email: "Please enter a valid email"
                    },
                    dob: {
                        required: "Please enter your dob",
                        date: "Please enter a valid date"
                    },
                    movie: {
                        required: "Please choose a movie",
                        adultsOnly: "This movie is for adults only!"
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio")) {
                        $("<br>").appendTo(element.parent().parent().find("label:first"));
                        error.appendTo(element.parent().parent().find("label:first"));
                    } else {
                        $("<br>").appendTo(element.parent().find("label"));
                        error.appendTo(element.parent().find("label"));
                    }
                }
            });
        });
    </script>
    <style>
        #customer, #email, #dob {
            height: 1.5em;
            width: 20em;
            text-align: left;
            outline: none;
            cursor: text;
        }

        .formlabel {
            float: left;
            width: 12em;
        }

        #reserve {
            margin-left: 12em;
        }

        legend {
            padding: 1em;
            font-size: 1.2em !important;
        }

        div {
            margin: 1em 0 1em 0;
        }
    </style>
</head>
<body>

<form id="reservation" method="get" action="">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">Retro Cinema Reservation</legend>
        <div>
            <label for="customer" class="formlabel">Name</label>
            <input type="text" id="customer" name="customer">
        </div>
        <div>
            <label for="email" class="formlabel">Email</label>
            <input type="email" id="email" name="email">
        </div>
        <div>
            <label for="dob" class="formlabel">Date of Birth</label>
            <input type="text" id="dob" name="dob">
        </div>
        <div>
            <label for="movie" class="formlabel">Choose your Movie</label>
            <div id="movie">
                <label for="movie1"><img src="saucer_men.jpg" alt="Invasion of the Saucer Men"
                                         style="width:200px;height:300px;"><br>Invasion of the<br>Saucer Men</label>
                <input type="radio" id="movie1" name="movie">
                <label for="movie2"><img src="plan_9.jpg" alt="Plan 9 from Outer Space"
                                         style="width:200px;height:300px;"><br>Plan 9 from<br>Outer Space</label>
                <input type="radio" id="movie2" name="movie">
                <label for="movie3"><img src="refer_madness.jpg" alt="Reefer Madness - Adults Only"
                                         style="width:200px;height:300px;"><br>Reefer Madness<br>Adults Only</label>
                <input type="radio" id="movie3" name="movie" class="adult">
            </div>
        </div>
        <div>
            <input type="submit" id="reserve" name="reserve" value="reserve">
        </div>
    </fieldset>
</form>

</body>
</html>
